<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page layout - administrator - Professor</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style/backups.css') }}">
    <link
      rel="stylesheet"
      type="text/css"
      href="{{ url_for('static', filename='style/alert.css') }}"
    />
    <script src="{{ url_for('static', filename='mobile/js/libs/jquery.min.js') }}" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div class="backups">
        <div class="con">
            <div class="header">
                <div class="h-left">
                    <span class="h-logo">logo</span>
                    <span class="h-school">{{ school }}</span>
                </div>
                <div class="h-right">
                    <input class="h-input" type="text" placeholder="search">
                    <div class="h-center">
                        <p class="h">Hi, {{ user.name }}</p>
                        <p class="h-1">welcome to {{ school }}, keep good work</p>
                    </div>
                    <p class="h-pic-c">
                        <img src="{{ url_for('get_avatar', filename=user.avatar) }}" alt="">
                        <a href="{{ url_for('auth.login') }}">
                            <img class="signup" src="{{ url_for('static', filename='mobile/img/signup.svg') }}" alt="" />
                        </a>
                    </p>
                </div>
            </div>
            <div class="l">
                <div class="l-list no-open">
                    <span class="l-circle"></span>
                    management
                    <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
                        <path
                            d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z">
                        </path>
                    </svg>
                </div>
                <div class="l-list">
                    <a href="{{ url_for('manage.professor') }}">
                        <span class="l-circle"></span>
                        professor
                        <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
                            <path
                                d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z">
                            </path>
                        </svg>
                    </a>
                </div>
                <div class="l-list">
                    <a href="{{ url_for('manage.student') }}">
                        <span class="l-circle"></span>
                        student
                        <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
                            <path
                                d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z">
                            </path>
                        </svg>
                    </a>
                </div>
                <div class="l-list active">
                    <a href="{{ url_for('manage.course') }}">
                        <span class="l-circle"></span>
                        course
                        <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
                            <path
                                d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z">
                            </path>
                        </svg>
                    </a>
                </div>
            </div>
            <div class="p-c">
                {% for course in courses %}
                    <div class="p-c-list">
                        <div>
                            <p class="pc-h">
                                {% if course.online %}
                                <span class="on-line">{{ status(course.online) }}</span>
                                {% else %}
                                <span class="off-line">{{ status(course.online) }}</span>
                                {% endif %}
                                <span class="pc-time">{{ formatDate(course.created_at) }}</span>
                            </p>
                            <p class="pc-title">{{ course.name }}</p>
                            <p class="pc-con">{{ course.about }}</p>

                        </div>
                        <div class="pc-lc">
                            <img src="{{ url_for('static', filename='img/img001.jpg') }}" alt=""/>

                            <div class="pc-lcs">
                                <p class="pc-h">
                                    <span class="off-line">{{ status(course.online) }}</span>
                                    <span class="pc-time">{{ formatDate(course.created_at) }}</span>
                                </p>
                                <p class="pc-title">{{ course.name }}</p>
                                <p class="pc-con">{{ course.about }}</p>
                                <p class="pc-tips">
                                    student：{{ course.number_of_students }}
                                </p>
                                <p class="pc-tips">
                                    duration：{{ course.duration }} min / {{ course.lessions }} lessions</p>
                            </div>
                        </div>

                    </div>
                {% endfor %}
                <div class="p-c-list">
                    <div class="new-course"  onclick="showAlerFn(this,event)">
                        <img src="{{ url_for('static', filename='img/001.svg') }}" alt=""/>
                        <p>New course</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
  <div class="alert" onclick="hideAlerFn()">
            <div class="alert-con" onclick="showAlerFn(this,event)">
                <div class="alert-con-top">
                    <span class="alert-top-text">
                        add course
                    </span>
                    <span class="alert-close" onclick="hideAlerFn(this,event)">
                        ×
                    </span>
                </div>

                <form method="post">
                    <div class="alert-input-con">
                        <div class="alert-input-list">
                            <p class="alert-input-title">School Year</p>
                            <input id="school_year" name="school_year" type="number" min="2021" max="2099" value="2021" placeholder="please enter the chool year" required>
                        </div>
                        <div class="alert-input-list">
                            <p class="alert-input-title">Trimester</p>
                            <input id="trimester" name="trimester" type="number" min="1" max="3" value="1" placeholder="please enter the trimester" required>
                        </div>
                        <div class="alert-input-list">
                            <p class="alert-input-title">Course Title</p>
                            <input id="name" name="name" type="text" placeholder="please enter the course name" required>
                        </div>
                        <div class="alert-input-list">
                            <p class="alert-input-title">Course Lessons</p>
                            <input id="lessons" name="lessons" type="number" min="0" max="99" value="45" placeholder="please enter the course lessons" required>
                        </div>
                        <div class="alert-input-list">
                            <p class="alert-input-title">Professors</p>
                            <div class="alert-select">
                                <p class="alert-select-title" onclick="showSelectFn(1)">
                                    <select id="professor_id"
                                            name="professor_id" style="width: 100%;height: 100%;background-color: transparent;border: none;">
                                        {% for professor in professors %}
                                            <option value="{{ professor.id }}">{{ professor.name }}</option>
                                        {% endfor %}
                                    </select>
                                </p>
                            </div>
                        </div>
                        <div class="alert-input-list">
                            <p class="alert-input-title">Course Introduction</p>
                            <textarea id="about" name="about" placeholder="please enter the introduction of the course" required></textarea>
                        </div>
                    </div>
                    <p class="alert-submit-con">
                        <input class="alert-submit" type="submit" value="submit">
                    </p>
                </form>

            </div>
        </div>
    <script>
        function showAlerFn(obj, event) {
            stopP(event)
            $(".alert").eq(0).addClass("show");
            $(".alert-select-lists").removeClass("show");
        }

        function showAlertFn(obj, event) {
            stopP(event)
            $(".alert").eq(1).addClass("show");
        }

        function showSelectFn(num) {
            $(".alert-select-lists").removeClass("show");
            stopP(event)
            $(".alert-select-lists").eq(num).addClass("show");
        }

        function stopP(e) {
            var evt = e || window.event;
            evt.stopPropagation ? evt.stopPropagation() : (evt.cancelBubble = true);
        }

        function hideAlerFn() {
            stopP(event)
            $(".alert").removeClass("show")
        }
    </script>
</body>

</html>